<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
  </ul>

  <button id="test">test</button>
  <div id="content">ddd</div>
  <!-- 
    宏任务  微任务  渲染页面
    js把异步任务又分为 宏任务和微任务

    微任务: 解决js的精度问题 Promise的回调 .then() .catch()  async/await 
    宏任务: 依次排队执行   AJAX请求 定时器   文件操作  script标签

    执行流程:每个宏任务执行完毕之后 会检查是否有微任务  如果有那么就执行微任务  微任务执行完毕后 再执行宏任务
    注意 先执行宏任务 宏任务后面会有微任务队列

    先执行同步任务，异步任务有宏任务和微任务两种，先将宏任务添加到宏任务队列中，将宏任务里面的微任务添加到微任务队列中。
    所有同步执行完之后执行异步，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行。之后就一直循环..
    

    微任务和宏任务执行顺序和页面渲染的关系
    script宏任务执行完毕 =>  所有微任务执行完毕  =>  渲染页面(初始化)  => 取出队列的一个宏任务 => 依次取出所有微任务 => 渲染页面(更新) 

   -->

  <!-- 
  <script>
    // 案例1
    setTimeout(function () {
      console.log('1'); // 宏任务
    });
    new Promise(function (resolve) {
      console.log('2'); // 同步
      resolve();
    }).then(function () {
      console.log('3'); // 微任务
    }).then(function () {
      console.log('4') // 微任务
    });
    console.log('5'); // 同步
    //  2  5  3  4  1


    // 案例2 
    setTimeout(() => {
      new Promise(resolve => {
        resolve();
      }).then(() => {
        console.log('test'); 
      });
      console.log(4);    
    });

    new Promise(resolve => {
      resolve();
      console.log(1)    
    }).then(() => {
      console.log(3);    
      Promise.resolve().then(() => {
        console.log('before timeout');
      }).then(() => {
        Promise.resolve().then(() => {
          console.log('also before timeout')
        })
      })
    })
    console.log(2);// 同步
    //  1  2  3  'be'  'al'  4  test    
    /* 
    执行思路: 
    1.遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中
    2.遇到new Promise  new Promise实例化过程中是同步进行 输出1  而Promise的.then回调是异步 放入微任务队列
    3.遇到console.log(2);输出2  此时 所有的同步代码执行完毕
    4.微任务队列开始执行 输出3  但是 此微任务中还有微任务Promise.resolve().then(微任务a).then(微任务b) 依次执行微任务
    5.依次输出 before timeout   also before timeout  此时微任务队列执行完毕 
    6.然后执行宏任务队列 输出4  此任务里面还有一个微任务 最后输出test  
    */
  
  </script> -->

  <script> /*  script 宏任务  不进入宏任务队列 */
    let btn = document.querySelector('#test')
    let div = document.querySelector('#content')
    setTimeout(() => {
      alert(div.innerHTML) // 页面渲染了吗?
    }, 0)
    Promise.resolve().then(() => {
      alert('promise1') // 页面渲染了吗?
    })
    Promise.resolve().then(() => {
      alert('promise2') // 页面渲染了吗?
    })
    btn.onclick = () => {
      div.innerHTML = 'xxxx'
      setTimeout(() => {
        div.innerHTML = 'yyyy'
        alert(div.innerHTML) // 页面是否更新
      }, 0);
      Promise.resolve().then(()=>{
        div.innerHTML = 'yyyy'
        alert('promise3')
      })
      alert('onclick' + div.innerHTML)
    }
    alert('111')  //页面渲染了吗

    // 执行顺序: 不点击按钮情况下  111  => promise1  => promise2 => (第一个)定时器

  </script>
</body>

</html>